<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2023-03-11 15:01:04
 * @LastEditors: zzb
 * @LastEditTime: 2023-03-11 15:04:10
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./imgNew_3.css" />
    <script src="./jquery-1.12.4.js"></script>
    <script src="./imgNew_3.js"></script>

    <title>Document</title>
    <style>
      .parentbox,
      .parentbox2,
      .parentbox3 {
        width: 500px;
        height: 300px;
        border: 4px solid #df0808;
      }
    </style>
  </head>

  <body>
    <!-- 轮播图父元素。由平台提供 -->
    <div class="parentbox">
      <!-- 使用下面的dom -->
      <div class="newimg3-container">
        <div class="slide-item">
          <img src="./articleImg/image1.jpg" alt="Slide 1" />
          <div class="header">Caption 1</div>
        </div>
        <div class="slide-item">
          <img src="./articleImg/image2.jpg" alt="Slide 2" />
          <div class="header">Caption 2</div>
        </div>
        <div class="slide-item">
          <img src="./articleImg/image3.jpg" alt="Slide 3" />
          <div class="header">Caption 3</div>
        </div>
        <a class="prev arrow" data-arrow="-1">&#10094;</a>
        <a class="next arrow" data-arrow="1">&#10095;</a>
        <div class="dots-container">
          <span class="dot-item" data-slide="1">1</span>
          <span class="dot-item" data-slide="2">2</span>
          <span class="dot-item" data-slide="3">3</span>
        </div>
      </div>
    </div>

    <div class="parentbox2">
      <!-- 使用下面的dom -->
      <div class="newimg3-container">
        <div class="slide-item">
          <img src="./articleImg/image1.jpg" alt="Slide 1" />
          <div class="header">Caption 1</div>
        </div>
        <div class="slide-item">
          <img src="./articleImg/image2.jpg" alt="Slide 2" />
          <div class="header">Caption 2</div>
        </div>
        <div class="slide-item">
          <img src="./articleImg/image3.jpg" alt="Slide 3" />
          <div class="header">Caption 3</div>
        </div>
        <a class="prev arrow" data-arrow="-1">&#10094;</a>
        <a class="next arrow" data-arrow="1">&#10095;</a>
        <div class="dots-container">
          <span class="dot-item" data-slide="1">1</span>
          <span class="dot-item" data-slide="2">2</span>
          <span class="dot-item" data-slide="3">3</span>
        </div>
      </div>
    </div>

    <div class="parentbox3">
      <!-- 使用下面的dom -->
    </div>

    <script>
      //  模拟生成文章列表
      var articleList = []
      for (var i = 0; i < 5; i++) {
        var o = {
          header: '标题' + (i + 1),
          author: '作者' + (i + 1),
          aritcleImg: './articleImg/image' + (i + 1) + '.jpg'
        }
        articleList.push(o)
      }

      function buildImgNews3(articleList) {
        var imgNews = '<div class="newimg3-container">'
        var dots = '<div class="dots-container">'
        for (var i = 0; i < articleList.length; i++) {
          var articleItem = articleList[i]
          imgNews += '<div class="slide-item">\n            <img src=' + articleItem.aritcleImg + ' alt="" />\n            <div class="header">' + articleItem.header + '</div>\n          </div>'
          dots += '<span class="dot-item" data-slide="' + i + '">' + (i + 1) + '</span>'
        }
        imgNews += dots
        imgNews += '</div><a class="prev arrow">&#10094;</a><a class="next arrow">&#10095;</a></div>'
        $('.parentbox3').html(imgNews)
        newImg3('parentbox3')
      }

      // 调用 图片新闻，传参 父元素 的className 。

      newImg3('parentbox')
      newImg3('parentbox2')
      buildImgNews3(articleList)
    </script>
  </body>
</html>
